import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import _ from 'loadsh'
import request from '@/helpers/service'
class GraphCardBody extends Component {
  state = {
    option: {}
  }

  echartsRef = null

  componentDidMount() {
    const { settings, filters } = this.props
    console.log(this.echartsRef)
    this.getChartData({ ...settings, ...filters })
  }

  componentDidUpdate(prevProps) {
    const { settings, filters, echartsData } = this.props
    if (
      !_.isEqual(settings, prevProps.settings) ||
      !_.isEqual(filters, prevProps.filters) ||
      !_.isEqual(echartsData, prevProps.echartsData)
    ) {
      const params = { ...settings, ...filters }
      this.getChartData(params)
    }
  }

  getChartData = (params) => {
    const { echartsData, openLoading, openGraphStatus } = this.props
    const { response } = this.props.echarts
    if (echartsData) {
      const option = response(echartsData, params)
      this.setState({ option }, this.dealOptionStatus)
      return
    }

    // 开启loading
    if (openGraphStatus) {
      openLoading()
    }

    const { method, url, requestParams } = this.props.echarts
    const requestParamsData = requestParams ? _.cloneDeep(requestParams(params)) : {}
    if (method === 'post') {
      request({
        method: 'post',
        url,
        data: requestParamsData
      }).then((res) => {
        const option = response(res, requestParamsData)
        this.setState({ option }, this.dealOptionStatus)
      })
      return
    }

    request({ url, params: requestParamsData }).then((res) => {
      const option = response(res, requestParamsData)
      this.setState({ option }, this.dealOptionStatus)
    })
  }

  dealOptionStatus = () => {
    const { option } = this.state
    const { closeLoading, openGraphStatus, renderEmptyData } = this.props
    if (openGraphStatus) {
      if (this.checkIsEmpty(option)) {
        renderEmptyData()
        return
      }
      closeLoading()
    }
  }

  checkIsEmpty = (option = {}, isEmpty) => {
    let i = isEmpty
    const { series } = option
    if (!isEmpty) {
      if (series) {
        if (_.isObjectLike(series)) {
          if (_.isArray(series)) {
            i =
              _.filter(
                series,
                (v) =>
                  v.data && v.data.length > 0 && _.filter(v.data, (s) => (s || s === 0).length > 0)
              ).length < 1
          } else {
            i = series.data && series.data.length < 1
          }
        } else {
          i = true
        }
      } else {
        i = true
      }
    }
    return i
  }

  render() {
    const { height = 357, config } = this.props.echarts
    const { option } = this.state
    const newConfig = config ? (typeof config === 'function' ? config(this.props) : config) : {}
    const { zoomShow } = this.props
    return (
      <section style={{ height: '100%' }}>
        <ReactEcharts
          ref={(_c) => (this.echartsRef = _c)}
          notMerge
          option={option}
          style={{ height: zoomShow ? '100%' : height }}
          {...newConfig}
        />
      </section>
    )
  }
}

export default GraphCardBody
